<template>
  <!--  导航部分 -->
  <el-row class="row">
    <el-col :span="24">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item>内容类型管理</el-breadcrumb-item>
        <el-breadcrumb-item>内容类型列表</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
  </el-row>
  <!-- 工具栏部分 -->
  <el-row class="row">
    <el-col :span="24">
      <el-button @click="toAddContentCat">去添加内容类型</el-button>
    </el-col>
  </el-row>
  <el-row class="row">
    <el-col :span="24">
      <el-tree
          :data="cats"
          :props="defaultProps"
          @node-click="chooseParent"

      >
        <template #default="{ node, data }">
        <span style="margin: 15px">
          <span @mouseover="showBtn(data)">{{ node.label }}</span>
          <span style="margin-left: 25px" v-show="currentOverCatId == data.catId">
            <el-button type="info" @click="nodeEdit(node,data)" size="small">编辑</el-button>
            <el-button type="danger" @click="nodeDelete(node,data)" size="small">删除</el-button>
          </span>
        </span>
        </template>
      </el-tree>
    </el-col>
  </el-row>
</template>
<script setup>
import {useRouter} from 'vue-router'
import contentCategoryRequest from '../../api/contentCategory.js';
import {ref, onMounted, reactive} from 'vue';
import {ElMessage} from 'element-plus'

let currentCat = undefined;// 记录当前选中的元素
let currentOverCatId = ref();


const router = useRouter()

const defaultProps = {
  children: 'children',
  label: 'catName',
}

/*模拟数据*/
let cats = reactive([]);

/**
 * 树节点悬浮事件
 */
function showBtn(data){
  currentOverCatId.value = data.catId;
}

/**
 * 节点的编辑按钮事件
 */
function nodeEdit(node,data){
  console.log(node);
  console.log(data);
}

/**
 * 加载所有的内容类型，结果是一个树结构
 * @returns {Promise<void>}
 */
async function loadCats() {
  contentCategoryRequest.queryAll(res => {
    console.log(res)
    cats.push(...res.data);
  })
}

/**
 * 树节点的单击事件
 * @param data 这个节点上的数据
 */
function chooseParent(data) {
  // 立刻记录当前选择的节点
  currentCat = data;
  console.log(currentCat)
}


/**
 * 新增节点的按钮事件
 */
function toAddContentCat() {
  console.log(router)
  router.push("/home/contentCategory-add");
}


onMounted(() => {
  loadCats();
});
</script>
<style scoped>
.row {
  margin-top: 15px;
  padding: 10px;
}

</style>